<template>
  <el-row>
    <el-col :span="24">
      <el-card>
        <el-form :inline="true">
          <el-radio-group v-model="condition.status" @change="selectByPage(1)" >
            <el-radio-button label="全部" :value="9" />
            <el-radio-button label="未支付" :value="0" />
            <el-radio-button label="已支付" :value="1" />
            <el-radio-button label="已发货" :value="2"  />
            <el-radio-button label="已收货" :value="3" />
            <el-radio-button label="退货退款" :value="4" />
            <el-radio-button label="退货换货" :value="5" />
            <el-radio-button label="仅退款" :value="6" />
            <el-radio-button label="售后" :value="7" />
            <el-radio-button label="已完成" :value="8" />
          </el-radio-group>
          <el-form-item style="float: right;">
            <el-input v-model="condition.id" placeholder="请输入要搜索的订单号" @input="selectByPage(1)"/>
          </el-form-item>

        </el-form>
        <el-table :data="pageInfo.list"  style="width: 100%">
          <el-table-column type="expand">
            <template #default="props">
              <div>
                <h3>商品</h3>
                <el-table :data="props.row.detailList" >
                  <el-table-column label="商品名称" prop="good.name" />
                  <el-table-column label="描述" prop="good.dscp" />
                  <el-table-column label="颜色" prop="good.color" />
                  <el-table-column label="版本" prop="good.version" />
                  <el-table-column label="数量" prop="count" />
                  <el-table-column label="价格" prop="price" />
                </el-table>
              </div>
            </template>
          </el-table-column>
          <el-table-column  label="订单编号" prop="id" />
          <el-table-column label="下单时间" prop="createTime" />
          <el-table-column  label="快递单号" prop="express" />
          <el-table-column  label="地址" prop="addrDetail" align="center"/>
          <el-table-column label="支付方式"  align="center">
            <template #default="scope">
              <el-tag type="primary" v-if="scope.row.payType == 0">余额支付</el-tag>
              <el-tag type="primary" v-if="scope.row.payType == 1">支付宝</el-tag>
              <el-tag type="primary" v-if="scope.row.payType == 2">微信</el-tag>
              <el-tag type="primary" v-if="scope.row.payType == 3">银联</el-tag>
              <el-tag type="primary"  v-if="scope.row.payType == 4">其他</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="状态"  align="center">
            <template #default="scope">
              <el-tag type="warning" v-if="scope.row.status == 0">未支付</el-tag>
              <el-tag type="success" v-if="scope.row.status == 1">已支付</el-tag>
              <el-tag type="success" v-if="scope.row.status == 2">已发货</el-tag>
              <el-tag type="primary" v-if="scope.row.status == 3">已收货</el-tag>
              <el-tag type="warning"  v-if="scope.row.status == 4">退货退款</el-tag>
              <el-tag type="warning" v-if="scope.row.status == 5">退换货</el-tag>
              <el-tag type="warning" v-if="scope.row.status == 6">仅退款</el-tag>
              <el-tag type="danger" v-if="scope.row.status == 7">售后</el-tag>
              <el-tag type="info" v-if="scope.row.status == 8">已完成</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button size="small"  type="warning" @click="selectById(scope.row.id)">
                修改
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row class="row-bg" justify="center" style="margin-top: 20px;">
          <el-pagination layout="prev, pager, next" :total="pageInfo.total" :page-size="pageInfo.pageSize"
                         @change="selectByPage"/>
        </el-row>
      </el-card>
    </el-col>
  </el-row>

  <!-- 修改订单对话框开始 -->
  <el-dialog v-model="updateDialogShow" title="修改订单信息" width="500">
    <el-form-item label="快递单号" label-width="20%">
      <el-input v-model="orderUpdate.express" placeholder="请输入快递单号" autocomplete="off" style="width: 300px"/>
    </el-form-item>
    <el-form-item label="状态" label-width="20%">
      <el-radio-group v-model="orderUpdate.status">
        <el-radio label="未支付" :value="0"/>
        <el-radio label="已支付" :value="1"/>
        <el-radio label="已发货" :value="2"/>
        <el-radio label="已收货" :value="3"/>
        <el-radio label="退货退款" :value="4"/>
        <el-radio label="退换货" :value="5"/>
        <el-radio label="仅退款" :value="6"/>
        <el-radio label="售后" :value="7"/>
        <el-radio label="已完成" :value="8"/>
      </el-radio-group>
    </el-form-item>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updateDialogShow = false">
          取消
        </el-button>
        <el-button type="primary" @click="update">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 修改订单框结束 -->

</template>

<script setup>

import {ElLoading, ElMessage} from "element-plus";
import orderApi from "@/api/orderApi.js";
import {ref} from "vue";


//搜索条件
const condition = ref({
  id:null,
  status:9
})
//分页信息
const pageInfo = ref({
  pages: 0,
  pageSize: 0,
  pageNum: 0
});
//被修改订单信息
const orderUpdate = ref({
  id:null,
  express:null,
  addrId:null,
  addrDetail:null,
  status:null
})
//是否显示修改对话框
const updateDialogShow = ref(false);


//修改订单
function update() {
  const loading = ElLoading.service({
    lock: true,
    text: '加载中',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  orderApi.update(orderUpdate.value)
      .then(resp => {
        loading.close();
        if (resp.code == 10000) {
          ElMessage({
            message: resp.msg,
            type: 'success',
            duration: 1500
          })
          updateDialogShow.value = false;
          selectByPage(pageInfo.value.pageNum);
        } else {
          ElMessage({
            message: resp.msg,
            type: 'error',
            duration: 1500
          });
        }
      });
}

//分页搜索
function selectByPage(pageNum){
  const loading = ElLoading.service({
    lock: true,
    text: '加载中',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  orderApi.selectByPage(condition.value,pageNum,10)
      .then(resp => {
        loading.close();
        pageInfo.value = resp.data;
      });
}
//根据id查询被修改订单的信息
function selectById(id){
  orderApi.selectById(id)
      .then(resp => {
        orderUpdate.value = resp.data;
        updateDialogShow.value=true;

      })
}


selectByPage(1);
</script>

<style scoped>

</style>